<script setup>
import { ref } from 'vue';
import { getGroupChatList } from '@/api/groupchat';
import { getMessagelist } from '@/api/message';
import { useRoute, useRouter } from 'vue-router'
import { showDialog } from 'vant';
import { onMounted } from 'vue';


const router = useRouter()
const route = useRoute()

// 定义一个mes存放请求回来的数据
const mes = ref([])
// 定义一个变量存储图片url地址
const imgUrl = ref([])

// -----------------------------------搜索-------------------------------

// 定义一个变量用于列表的显示
const show = ref(true)

// 搜索绑定的
const value = ref('');

// 定义一个变量存储搜索的数据
const searchMes = ref([])


// 消息搜索功能实现
function onSearch() {
    // console.log(value.value);
    // 不再展示消息列表，展示一个下拉的菜单
    show.value = false

    searchMes.value = mes.value.filter(item => {
        console.log(item.nickname.slice(0, value.value.length));
        // 根据输入的长度去匹配数据中名字的长度
        return item.nickname.slice(0, value.value.length) === value.value
    })
    if (!searchMes.value[0]) {
        showDialog({
            message: '没有该联系人',
        }).then(()=>{
            value.value = ''
            show.value = true
        })
    }
    console.log('搜索的数据', searchMes.value);
}

// 点消息的时候触发
function toGit(id) {
    // console.log(id);
    window.localStorage.setItem('id', id)
    router.push('/groupchat')
}



// ----------------------------------------------------------------------------------
// 发送消息请求
getGroupChatList().then(res => {
    const groupMes = JSON.parse(window.localStorage.getItem('data'))
    console.log(groupMes);
    mes.value = groupMes?groupMes:res.data.message
    console.log(mes.value);

    mes.value.forEach((item) => {
        return imgUrl.value.push(item.url.split(','))
    })
})
</script>

<template>
    <div class="box">
        <!-- 1.表单组件————搜索  点击键盘上的搜索/回车按钮后触发-->
        <van-search @search="onSearch" v-model="value" input-align="left" shape="round" placeholder="搜索群聊" />
        <div class="content ">
            <!-- 2.好友列表 -->
            <van-tag v-if="show" type="danger" size="large" v-for="(item, index) in mes" :key="item.id"
                @click="toGit(item.id)">
                <!-- 基础组件————image图片 -->
                <van-image v-if="imgUrl" round width="55px" height="55px" :src="imgUrl[index][0]" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p class="p1">{{ item.nickname }}</p>
                </div>
            </van-tag>
            <!-- 2.2搜索时展示的群组列表 -->

            <van-tag v-else type="danger" size="large" v-for="(item, index)  in searchMes" @click="toGit(item.id)">
                <!-- 基础组件————image图片 -->
                <van-image v-if="imgUrl" round width="55px" height="55px" :src="imgUrl[index][0]" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p class="p1">{{ item.nickname }}</p>
                </div>
            </van-tag>
        </div>
    </div>
</template>


<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.van-search {
    margin-bottom: 10px;
    width: 94%;
    margin: 0 auto;
}

.van-tabs {
    width: 204px;

}

.van-tag {
    display: flex;

    .text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }


}

.active {
    font-size: 50px;
}

.van-tag--large {
    margin: 0 auto;
    width: 336px;
    height: 60px;
    color: black;
    background-color: #FFF;
    border-bottom: 1px solid rgb(248, 239, 239);
}</style>